Vue 小结
本篇为 Vue 2.X 的相关内容
class 与 style 绑定变量
1 | <template> |
prop
需要注意的是,当 prop 属性为 Object, Function 和 Array 类型时,需要使用 return 返回
1 | // 基本用法 |
computed
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
1 | computed: { |
methods
注意,不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.a 将是 undefined。
路由
路由模式
vue-router 默认使用 hash 模式,通过监听 hashchange 事件来实现局部更新,使用此模式,项目的 url 地址会带有 # 符号,如果不希望使用这种模式的话,可以使用自带的另一种模式即 history 模式:
1 | const router = new Router({ |
history 模式是通过 history.pushState API 来完成 SPA 的,但是需要注意的是:
这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。
所以要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。
路由传参
除了使用
创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。
在 Vue 实例内部,你可以通过 $router 访问路由实例,因此你可以调用 this.$router.push。
一个路由对象 (route object) 表示当前激活的路由的状态信息,包含了当前 URL 解析得到的信息,还有 URL 匹配到的路由记录 (route records)。
路由对象是不可变 (immutable) 的,每次成功的导航后都会产生一个新的对象,在组件内部,即 this.$route。
1.params 传参
1 | /** 传参 **/ |
2.query 传参
1 | /** 传参 **/ |
3.路径传参
1 | //配置路由 |
1 | /** 传参 **/ |
位置跳转
在列表页跳转到详情页的时候,当列表页发生滚动的时候,跳转的详情页也会相应发生位置的变更,这就很不友好了,可以使用
1 | $(window).scrollTop(0); |
但其实在 vue-router 中,也已经提供了更详细的 scrollBehavior 方法,在创建 router 实例阶段,添加这个方法:
1 | scrollBehavior (to, from , savedPosition){ |
savedPosition参数当且仅当 popstate(通过浏览器的前进后退按钮触发)时才有用,返回之前的位置 。
vue-router 规定,在使用 scrollBehavior 方法时,必须要在 H5 的 history 模式下才可以使用,然而这就面临一个问题,在服务器端访问的时候,由于从 hash 访问变为 history 模式访问,路由中配置的根路径会直接指向到服务器的根目录,而不是项目本身所在的路径,这个坑又是困扰我了好久,虽然官方文档给出了解决方案,就是修改服务器端的配置文件: 在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。
我的服务器是nginx,用了这个方法重启服务器之后,发现问题依然没有解决(具体我也不知道为什么),于是继续向度娘求助,有人说可以直接使用绝对路径,就是在路由配置中将相对路径直接修改为绝对路径,试了这个办法,果然可行,可是这么做本地线上不同步,而且只要是有路由的地方都要修改添加,很耽误开发效率。无意间,看到了一位大神的回答,在路由实例化阶段,有一个 base 属性(官方文档并没有给出),表示应用的基路径,默认为根路径,所以只要修改这个属性值就不再需要进行多余的操作了。
添加返回
使用 History 对象的 history.go(-1),也可以通过 router 的实例方法,使用方法和 window.history 基本一致:
1 | mechods:{ |
回到顶部
需要注意的是,若有使用全局监听事件,要在组件销毁之前移除事件,避免影响其它组件。
1 | <template> |
请求及跨域
axios 基本用法
1.安装
1 | //npm |
2.使用
1 | /* 使用 params 传参,参数会挂在请求 url 中,使用 data 传参则不会,由于 url 长度限制较小,尽量使用 data 传参 */ |
更多使用移步 axios 官方文档
跨域
服务器不支持跨域请求
此时可以在 config/index.js 中的proxyTable中添加:1
2
3
4
5
6
7
8
9
10
11
12
13proxyTable: {
"/api": {
target: "http://192.168.1.1:80",
changeOrigin: true
pathRewrite: {
'^/api': ''///api 替代 target
}
}
}
/*
* 配置代理之后可以使用 axios 进行跨域请求,但这样做只能在开发模式下使用。
* 打包部署的时候建议使用 nginx 做代理。
*/服务器端支持跨域
如果能支持跨域那就可以使用 jsonp 来请求了。jsonp 实际上就是通过添加 script 标签来添加的,请求回来的数据也是 js 格式。 axios 不支持跨域,可以手动创建 script 标签,把请求的地址赋给 script 标签的 src 属性,最后添加到 head 标签上,等到请求返回再把标签删掉:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15jsonpRequest: function (a, e) {
this._ajaxTimer && clearTimeout(this._ajaxTimer);
this._ajaxTimer = setTimeout(function () {
var request_script = document.createElement('script');
request_script.setAttribute("id", "request_script");
request_script.src = 'http://xxxx'+'&t=' + Date.now();
window.callback = function (response) {
// 移除脚本
document.body.removeChild(document.getElementById('request_script'));
console.log(response.content);
}
document.body.appendChild(request_script);
}, 500);
},使用 vue-jsonp
安装1
npm install vue-jsonp --save
引入
1 | import jsonp from 'vue-jsonp' |
使用
1 | this.$jsonp('/api', { |
- axios-jsonp
对于使用 axios 进行数据请求的情况,axios 提供了 adapter 配置,允许自定义处理请求1
2
3adapter: function (config) {
// doSomeThing
},
安装 axios-jsonp
1 | npm install axios-jsonp |
使用
1 | let axios = require('axios'); |
组件缓存 keep-alive
keep-alive 是 Vue 提供的抽象组件(或称功能型组件),并不会被渲染在 DOM 结构中。它的作用是在内存中缓存组件(不让组件销毁),等到下次再渲染的时候,还会保持其中的所有状态,并且会触发 activated 钩子函数。因为缓存的需要通常出现在页面切换时,所以常与 router-view 一起出现。
1 | <keep-alive :include="['ListView', 'DetailView']"> |
其中,include 属性表示要缓存的组件名(name属性),接收类型有字符串,字符数组以及正则表达式(RegExp)。
除了使用 include 指定缓存的组件之外,有时我们希望从某一个组件跳转到当前组件进行缓存,其它组件跳转当前组件不使用缓存,可以使用导航守卫进行控制。
首先全局定义 keep-alive
1 | <!-- 通过每一个路由下 meta 属性决定是否使用组件缓存 --> |
在路由中配置是否使用组件缓存
1 | routes: [ |
在导航守卫中控制组件缓存与否
1 | // 全局前置守卫进行控制 |
可以看出,后面的用法对于 keep-alive 的配置性来说要更高一些。
Vue.use
安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。
- 该方法需要在调用 new Vue() 之前被调用。
开启 Vue 调试
对于 vue-cli3,如下方式开启源码调试
1 | configureWebpack: config => { |
查看 Vue 版本
1 | npm list vue |
nextTick 获取不到DOM
nextTick只在当前组件dom更新后触发,并不能监听到子组件渲染完成,可以使用$emit监听或者在mounted中使用setTimeout来解决。